<script setup lang="ts">

import {reactive, ref} from "vue";
import {getInfo, showTree} from "@/api/home/login/login";
import NavigationBar from "@/components/navigationBar.vue";
import {ElMessage} from "element-plus";
import router from "@/router";
// import type {treeList} from "@/api/home/login/loginData";
//展示列表
let TreeContent = ref<boolean>()
let treeShow = ref([])
getInfo().then(res => {
    if (res.code == 401) {
        ElMessage.error('登录认证过期，请重新登录！')
        router.push({path: `/login`})
    }
    if (res.code == 200) {
        getList()
    }
})
function getList() {
    showTree().then((item) => {
        // console.log(item)
        if(item.code===200){
            if(item.rows.length === 0){
                // console.log(1)
                TreeContent.value = false
            }else{
                TreeContent.value = true
            }
            treeShow.value = item.rows.map((value)=>{
                console.log(value)
                return value
            })
        }
    })
}


</script>

<template>
    <div class="box">
        <div class="sectionBox">
            <p class="title">树洞</p>
            <ul v-if = "TreeContent">
                <li class="ellipsis-multiline" v-for="(item,index) in treeShow" :key="index">
                    <router-link :to="{path:'/detailsTreeHole',query:{treeId:item.id}}">
                        <p>{{ item.title }}</p>
                        <span>{{ item.content }}</span>
                        <div>{{item.createTime}}</div>
                    </router-link>
                </li>
            </ul>
            <div v-else class="notDateBox">
                <a-empty class="notDate" description="还没有发布树洞哦"
                         image="../../src/assets/images/无数据.png"/>
            </div>
        </div>
        <router-link to="/addTreeHole">
            <button class="addBtn">+</button>
        </router-link>
        <div class="navigationBar">
            <navigation-bar></navigation-bar>
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100vh;
  //background-color: #F8F8F8;

  .addBtn {
    position: fixed;
    bottom: 130px;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0;
    background-color: #1892FF;
    color: white;
    font-size: 30px;
    line-height: 35px;
  }
}

.navigationBar {
  position: fixed;
  padding: 3% 0;
  width: 100%;
  min-height: 6%;
  background-color: #fff;
  bottom: 0;
  border: 1px solid rgba(42, 43, 65, 0.2);
}

.sectionBox {
  padding: 20px 15px;

  .title {
    margin: 20px 0;
    font-size: 20px;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;

    li {
      position: relative;
      margin-top: 12px;
      padding: 10px;
      width: 48.5%;
      height: 120px;
      border: 1px solid #D0D0D0;
      box-sizing: border-box;
      //background-color: red; border-radius: 6px;

      router-link{

      }
      p {
        margin: 5px 0 8px;
        color: black;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 显示3行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 可选，用来在文本末尾显示省略号 */
        font-size: 14px;
        color:black;
      }

      div {
        position: absolute;
        bottom: 10px;
        left: 10px;
        font-size: 12px;
        color: #6F6F6F;
      }
    }
  }
  .notDateBox {
    height: 50vh;
    .notDate{
      margin: 15vh auto 0;
      width: 90%;
      height: 200px;
      font-size: 18px;
      color: #6A6A6A;
    }
  }

}
/deep/ :where(.css-dev-only-do-not-override-mb15du).ant-empty .ant-empty-image {
  height: 50vw;
}

.ant-empty .ant-empty-image{
  height: 200vw;
}
.ant-empty .ant-empty-image img{
  height: 200px;
}

</style>